import {Form, FormField, Label, LinkButton, NumberBox, RadioButton, TextBox, ComboBox} from "rc-easyui";
import React, {useEffect, useRef, useState} from "react";
import {tfield, tparam, tt} from "@kordar-lib/i18n";
import {FormDataType} from "@kordar-lib/base";
import {$toast} from "@kordar/easyui";
import {convertToText, fetchConfigOptions, resourceService} from "@kordar/easyui-tpl";
import {toBucketSelect} from "./helper";

const FormPanel = ({ctx, type, record, pageConfig, fetchConfig, close, buckets}) => {

    const [formData, loadFormData] = useState(record)
    const form = useRef(null)

    const rules = {
        name: {required: true},
    }

    const handleChange = (name, value) => {
        loadFormData({...formData, [name]: value})
    };

    useEffect(() => {
        ctx.setMethod("submitForm", onSubmit)
    }, [])

    // 提交数据
    const onSubmit = () => {

        form.current.validate((errors) => {
            if (errors != null) {
                $toast.error(convertToText(errors));
                return
            }

            let data = {
                id: parseInt(formData.id),
                name: formData.name,
                description: formData.description,
                state: parseInt(formData.state),
                type: formData.type,
                scene: formData.scene,
                sort: parseInt(formData.sort),
                bucket_id: formData.bucket_id,
            }
            let formBody = {object: data, conditions: []}
            if (type === FormDataType.UPDATE) {
                formBody.conditions.push({key: "id", value: record.id})
            }
            resourceService.saveResult(ctx?.name(), type, formBody, () => {
                $toast.success(tt("save_success", "Message"))
                ctx.refresh()
                close()
            }).then(r => {});
        })

    }

    return (
        <Form ref={form}
              model={formData}
              labelWidth={120}
              labelAlign="left"
              errorType="tooltip"
              rules={rules}
              style={{minWidth: 500, padding: '20px'}}
              onChange={handleChange}
        >

            <FormField name="name" label={tfield(pageConfig, 'name.label', 'Name') + ":"}>
                <TextBox placeholder={tfield(pageConfig, 'name.placeholder', '')} value={formData.name}></TextBox>
            </FormField>
            <FormField name="description" label={tfield(pageConfig, 'description.label', 'Description') + ":"}>
                <TextBox placeholder={tfield(pageConfig, 'description.placeholder', '')} value={formData.description}></TextBox>
            </FormField>
            <FormField name="state" label={tfield(pageConfig, 'state.label', 'State') + ":"}>
                <div>
                    {fetchConfigOptions(fetchConfig, "state").map(item => {
                        return <span key={item.value}>
                            <RadioButton value={item.value} groupValue={formData.state + ''}
                                         inputId={'state-' + item.value}/>
                            <Label htmlFor={'state-' + item.value}
                                   style={{margin: '0 5px', width: 'auto'}}>{item.text}</Label>
                        </span>
                    })}
                </div>
            </FormField>
            <FormField name="type" label={tfield(pageConfig, 'type.label', 'Type') + ":"}>
                <div>
                    {fetchConfigOptions(fetchConfig, "type").map(item => {
                        return <span key={item.value}>
                            <RadioButton value={item.value}
                                         groupValue={formData.type + ''}
                                         inputId={'type-' + item.value}
                            >
                            </RadioButton>
                            <Label htmlFor={'type-' + item.value}
                                   style={{margin: '0 5px', width: 'auto'}}>{item.text}</Label>
                        </span>
                    })}
                </div>
            </FormField>
            <FormField name="scene" label={tfield(pageConfig, 'scene.label', 'Scene') + ":"}>
                <div>
                    {fetchConfigOptions(fetchConfig, "scene").map(item => {
                        return <span key={item.value}>
                            <RadioButton value={item.value}
                                         groupValue={formData.scene + ''}
                                         inputId={'scene-' + item.value}
                            >
                            </RadioButton>
                            <Label htmlFor={'scene-' + item.value}
                                   style={{margin: '0 5px', width: 'auto'}}>{item.text}</Label>
                        </span>
                    })}
                </div>
            </FormField>
            <FormField name="sort" label={tfield(pageConfig, 'sort.label', 'Sort') + ":"}>
                <NumberBox placeholder={tfield(pageConfig, 'sort.placeholder', '')}
                           value={formData.sort??1}></NumberBox>
            </FormField>
            <FormField name="bucket_id" label={tfield(pageConfig, 'bucket.label', 'Bucket') + ":"}>
                <ComboBox
                    placeholder={tfield(pageConfig, 'bucket.placeholder', '')}
                    data={toBucketSelect(buckets)}
                    value={formData.bucket_id}
                    onChange={(value) => handleChange("bucket_id", value)}
                />
            </FormField>

            <div className="admin-form-submit">
                <LinkButton style={{width: 80}} onClick={onSubmit} iconCls="icon-save">{tparam(pageConfig, 'submit.text', 'Submit')}</LinkButton>
                <LinkButton style={{width: 80}} onClick={close} iconCls="icon-cancel">{tparam(pageConfig, 'close.text', 'Close')}</LinkButton>
            </div>
        </Form>
    )

}

export default FormPanel
